
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:th="http://www.thymeleaf.org" lang="zh">

<head>
	<link rel="StyleSheet" href="../../static/css/jpetstore.css" type="text/css"
		  media="screen" />

	<meta name="generator"
		  content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org" />
	<title>JPetStore Demo</title>
	<meta content="text/html; charset=windows-1252"
		  http-equiv="Content-Type" />
	<meta http-equiv="Cache-Control" content="max-age=0" />
	<meta http-equiv="Cache-Control" content="no-cache" />
	<meta http-equiv="expires" content="0" />
	<meta http-equiv="Expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
	<meta http-equiv="Pragma" content="no-cache" />
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

</head>

<body>

<div th:include="~{common/commonSide::topbar}"></div>

<div id="Content">

	<div id="Catalog">




		<h3>User Information</h3>

		<table>
			<tbody>
			<tr>
				<td>User ID:</td>
				<td><input type="text" th:value="${account.userid}" name="userid" disabled></td>
			</tr>
			<tr>
				<td>New password:</td>
				<td><input id="stripes--517137302" name="password" type="password">
					<script type="text/javascript">
						setTimeout(
								function() {
									try {
										var z = document
												.getElementById('stripes--517137302');
										z.focus();
										z.select();
									} catch (e) {
									}
								}, 1);
					</script></td>
			</tr>
			<tr>
				<td>Repeat password:</td>
				<td><input name="repeatedPassword" type="password"></td>
			</tr>
			</tbody>
		</table>
		<h3>Account Information</h3>
		<table>
			<body>
			<tr>
				<td>First name:</td>
				<td><input th:value="${account.firstname}" name="account.firstName" type="text"></td>
			</tr>
			<tr>
				<td>Last name:</td>
				<td><input th:value="${account.lastname}" name="account.lastName" type="text"></td>
			</tr>
			<tr>
				<td>Email:</td>
				<td><input th:value="${account.email}" name="account.email" type="text" size="40"></td>
			</tr>
			<tr>
				<td>Phone:</td>
				<td><input th:value="${account.phone}" name="account.phone" type="text"></td>
			</tr>
			<tr>
				<td>Address 1:</td>
				<td><input th:value="${account.addr1}" name="account.address1" type="text" size="40"></td>
			</tr>
			<tr>
				<td>Address 2:</td>
				<td><input th:value="${account.addr2}" name="account.address2" type="text" size="40"></td>
			</tr>
			<tr>
				<td>City:</td>
				<td><input th:value="${account.city}" name="account.city" type="text"></td>
			</tr>
			<tr>
				<td>State:</td>
				<td><input th:value="${account.state}" name="account.state" type="text" size="4"></td>
			</tr>
			<tr>
				<td>Zip:</td>
				<td><input th:value="${account.zip}" name="account.zip" type="text" size="10"></td>
			</tr>
			<tr>
				<td>Country:</td>
				<td><input th:value="${account.country}" name="account.country" type="text" size="15"></td>
			</tr>
			</body>
		</table>


		<br>
		<input type="submit" name="editAccount" value="Save Account Information" onclick="editInfo()">
		<script>
			function editInfo() {
				var userid = $("input:text[name='userid']").val()
				var password = $("input:password[name='password']").val()
				var repeatedPassword = $("input:password[name='repeatedPassword']").val()
				var firstName = $("input:text[name='account.firstName']").val()
				var lastName = $("input:text[name='account.lastName']").val()
				var email = $("input:text[name='account.email']").val()
				var phone = $("input:text[name='account.phone']").val()
				var addr1 = $("input:text[name='account.address1']").val()
				var addr2 = $("input:text[name='account.address2']").val()
				var city = $("input:text[name='account.city']").val()
				var state = $("input:text[name='account.state']").val()
				var zip = $("input:text[name='account.zip']").val()
				var country = $("input:text[name='account.country']").val()

				var edit = {
					'userid':userid,
					'password': password,
					'firstname': firstName,
					'lastname': lastName,
					'email': email,
					'phone': phone,
					'addr1': addr1,
					'addr2': addr2,
					'city': city,
					'state': state,
					'zip': zip,
					'country': country
				}
				console.log(edit)
				if(password == repeatedPassword){
					this.updateInfo(edit);
				}else{
					alert("????????????")
				}

			}

			function updateInfo(edit){
				$.ajax({
					type: 'post',
					url: '/account/userInfo',
					data: JSON.stringify(edit),
					contentType: 'application/json;charset=utf-8',
					dataType: 'json',
					success: function (responseData) {
						console.log(responseData)
						window.location='/catalog/main'
					}
				})
			}


		</script>
		<br><br>
		<a href="/order/orderlist">My Orders</a><br><br>

	</div>

</div>

<div id="Footer">

	<div id="PoweredBy">
		&nbsp<a href="www.csu.edu.cn">www.csu.edu.cn</a>
	</div>

	<div id="Banner">IncludeBottom.html</div>

</div>

</body>
</html>





